<!DOCTYPE html>
<html>

<head>
    <link href="${require('./index.scss')}" rel="stylesheet">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Security-Policy"
        content="default-src 'none'; font-src 'self'; img-src 'self'; style-src 'self';">
    <title>about amphineko</title>
</head>

<body>
    <div id="container">
        <div class="section header grid-container grid-parent">
            <div class="split picture-container grid-30">
                <a href="assets/images/amphineko.png">
                    <img alt="picture of amphineko" class="picture" src="assets/images/amphineko@1x.jpg">
                </a>
            </div>

            <div class="split grid-70">
                <div class="names">
                    <h1 class="name">
                        <span class="no-wrap">
                            amphi
                            <a class="chem-element" data-element="neon" href="https://en.wikipedia.org/wiki/Neon">ne</a>
                            ko
                        </span>
                    </h1>
                </div>

                <div class="label-group">
                    <span class="header">language</span>
                    <span class="label">
                        <i aria-hidden="true" class="fas fa-language"></i>
                        汉语
                    </span>
                    <span class="label">漢語</span>
                    <span class="label">English</span>
                </div>

                <br />

                <div class="label-group">
                    <span class="header">project</span>
                    <span class="label">
                        <i aria-hidden="true" class="fas fa-box"></i>
                        Maeeko Laboratory
                    </span>
                </div>

                <div class="label-group">
                    <span class="header">noc-operator</span>
                    <a class="label" href="#">
                        <i aria-hidden="true" class="fas fa-network-wired"></i>
                        <span class="content">AS205058</span>
                    </a>
                    <a class="label" href="#">
                        <span class="content"><del>AS396303</del></span>
                    </a>
                </div>

                <br />

                <div class="label-group">
                    <span class="header">platforms</span>
                    <span class="label">
                        <i aria-hidden="true" class="fab fa-linux"></i>
                        debian gentoo
                    </span>
                    <span class="label">
                        <i aria-hidden="true" class="fab fa-apple"></i>
                        iOS macOS
                    </span>
                    <span class="label">
                        <i aria-hidden="true" class="fab fa-windows"></i>
                    </span>
                </div>

                <div class="label-group">
                    <span class="header">indents</span>
                    <span class="label">
                        <i aria-hidden="true" class="fas fa-i-cursor"></i>
                        spaces
                    </span>
                </div>
            </div>
        </div>

        <div class="section intro">
            <div class="block grid-container grid-parent">
                <div class="split grid-50 mobile-grid-100">
                    <p>
                        <del>Cursed</del> Network Engineering student.<br />
                        Has few experience in full-stack development.<br />
                        Operating own autonomous system.<br />
                        Contact me if you're interested to hire :D
                    </p>
                </div>

                <div class="split grid-50 mobile-grid-100">
                    <div class="label-group">
                        <span class="header alt">open-source</span>
                        <a class="label" href="https://github.com/amphineko">
                            <i aria-hidden="true" class="fab fa-github"></i>
                            <span class="title">GitHub</span>
                            <span class="content">@amphineko</span>
                        </a>
                    </div>
                    <div class="label-group">
                        <span class="header alt">social</span>
                        <a class="label" href="https://telegram.me/amphineko">
                            <i aria-hidden="true" class="fab fa-telegram"></i aria-hidden="true">
                            <span class="title">Telegram</span>
                            <span class="content">@amphineko</span>
                        </a>
                        <a class="label" href="https://twitter.com/amphineko">
                            <i aria-hidden="true" class="fab fa-twitter"></i>
                            <span class="title">Twitter</span>
                            <span class="content">amphineko</span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="block grid-container grid-parent">
                <div class="split grid-50 mobile-grid-100">
                    <p>
                        Music Game is LIFE!<br />
                        Love FPS and Simulation Games.<br />
                        Ingress Mission Collector.
                    </p>
                </div>

                <div class="split grid-50 mobile-grid-100">
                    <div class="label-group">
                        <span class="header alt">music game</span>
                        <span class="label">
                            <i aria-hidden="true" class="fas fa-compact-disc"></i>
                            Arcade: NekoSauc
                        </span>
                        <span class="label">
                            <i aria-hidden="true" class="fab fa-accessible-icon"></i>
                            osu! Rukatan
                        </span>
                    </div>

                    <div class="label-group">
                        <span class="header alt">Steam</span>
                        <span class="label">
                            <i aria-hidden="true" class="fab fa-steam"></i>
                            NekoSauce
                        </span>
                        <span class="label">
                            CS:GO
                        </span>
                    </div>

                    <div class="label-group">
                        <span class="header alt">Uplay</span>
                        <span class="label">
                            <i aria-hidden="true" class="fas fa-user"></i aria-hidden="true">
                            AtomicAkarin
                        </span>
                        <span class="label">
                            R6:S
                        </span>
                    </div>

                    <div class="label-group">
                        <span class="header alt">Niantic</span>
                        <span class="label">
                            <i aria-hidden="true" class="fas fa-plane"></i>
                            Ingress <del>[CODENAME REDACTED]</del>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="section footer">
            <a class="hosting" href="https://github.com/amphineko/amphineko">
                <i aria-hidden="true" class="fas fa-code-branch"></i> Fork this template on GitHub</a>
        </div>

        <div class="section footer shadow">
            <a class="hosting" href="//futa.moe/maeeko">
                <i aria-hidden="true" class="far fa-heart"></i> Hosted by Maeeko Laboratory
                <span class="link">//futa.moe/maeeko</span>
            </a>
            <div class="copyright">
                <i aria-hidden="true" class="fas fa-exclamation-triangle"></i>
                Copyright © 2015-2019 amphineko. Illustrations have their own licenses.
            </div>
        </div>
</body>

</html>